<!--
 * @Description: 我的订单页面组件
 * @Author: hai-27
 * @Date: 2020-02-20 17:21:54
 * @LastEditors: 张家亮 1690608011@qq.com
 * @LastEditTime: 2022-08-24 22:08:59
 -->
<template>
  <div class="order">
    <!-- 我的订单头部 -->
    <div class="order-header">
      <div class="order-header-content">
        <p>
          <i class="el-icon-s-order" style="font-size: 30px;color: #ff6700;"></i>
          我的订单
        </p>
      </div>
    </div>
    <!-- 我的订单头部END -->

    <!-- 我的订单主要内容 -->
    <div v-if="orders.length > 0">
      <div v-for="(item, index) in orders" :key="index">
        <el-row style="margin-top: 40px;">
          <el-col :span="18" :offset="3">
            <el-card>
              <div slot="header" class="clearfix">
                <el-row>
                  <el-col :span="18">
                    <div>
                      订单编号: {{ item[0].order_id }}
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div>订单时间: {{ item[0].order_time | dateFormat }}</div>
                  </el-col>
                </el-row>
              </div>

              <el-row type="flex">
                <el-col :span="8" :offset="6">
                  <div>商品名称</div>
                </el-col>
                <el-col :span="3">
                  <div>单价</div>
                </el-col>
                <el-col :span="2">
                  <div>数量</div>
                </el-col>
                <el-col :span="5">
                  <div>小计</div>
                </el-col>
              </el-row>

              <el-divider></el-divider>

              <div v-for="(product, i) in item" :key="i">
                <el-row type="flex" justify="center">
                  <el-col :span="4" :offset="2">
                    <router-link :to="{ path: '/goods/details', query: { productID: product.product_id } }">
                      <el-image style="height:80px; width:80px" :src="$target + product.product_picture" :fit="cover">
                      </el-image>
                    </router-link>
                  </el-col>
                  <el-col :span="8">
                    <router-link :to="{ path: '/goods/details', query: { productID: product.product_id } }">
                      {{ product.product_name }}
                    </router-link>
                  </el-col>
                  <el-col :span="3">
                    {{ product.product_price }}元
                  </el-col>
                  <el-col :span="2">
                    <div>{{ product.product_num }}</div>
                  </el-col>
                  <el-col :span="5">
                    <div>{{ product.product_price * product.product_num }}元</div>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
              </div>

              <el-row>
                <el-col :span="17" :offset="2">
                  共 {{ total[index].totalNum }} 件商品
                </el-col>
                <el-col :span="5">
                  合计：{{ total[index].totalPrice }}元
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 我的订单主要内容END -->

    <!-- 订单为空的时候显示的内容 -->
    <div v-else>
      <el-empty description="您的订单是空的哦！快去购物吧"></el-empty>
    </div>
    <!-- 订单为空的时候显示的内容END -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      orders: [], // 订单列表
      total: [] // 每个订单的商品数量及总价列表
    };
  },
  activated() {
    // 获取订单数据
    this.$axios
      .post("/api/user/order/getOrder", {
        user_id: this.$store.getters.getUser.user_id
      })
      .then(res => {
        if (res.data.code === "001") {
          this.orders = res.data.orders;
        } else {
          this.notifyError(res.data.msg);
        }
      })
      .catch(err => {
        return Promise.reject(err);
      });
  },
  watch: {
    // 通过订单信息，计算出每个订单的商品数量及总价
    orders: function (val) {
      let total = [];
      for (let i = 0; i < val.length; i++) {
        const element = val[i];

        let totalNum = 0;
        let totalPrice = 0;
        for (let j = 0; j < element.length; j++) {
          const temp = element[j];
          totalNum += temp.product_num;
          totalPrice += temp.product_price * temp.product_num;
        }
        total.push({ totalNum, totalPrice });
      }
      this.total = total;
    }
  }
};
</script>
<style scoped>
.el-row {
  margin-top: 10px;
}

.el-col {
  align-self: center;
}

.order {
  background-color: #f5f5f5;
  padding-bottom: 20px;
}

/* 我的订单头部CSS */
.order .order-header {
  height: 64px;
  border-bottom: 2px solid #ff6700;
  background-color: #fff;
  margin-bottom: 20px;
}

.order .order-header .order-header-content {
  width: 1225px;
  margin: 0 auto;
}

.order .order-header p {
  font-size: 28px;
  line-height: 58px;
  float: left;
  font-weight: normal;
  color: #424242;
}

/* 我的订单头部CSS END */
</style>